<template>
  <section>
    <div
      class="book-list"
      v-infinite-scroll="fetch"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="50"
    >
      <div class="item" v-if="!!datas.left.length">
        <div class="item-container" v-for="(item, index) in datas.left" :key="index"> 
          <!-- <div class="item-img">
            <img v-lazy="item.book_img">
          </div> -->
          {{ item }}
        </div>
      </div>
      <div class="item" v-if="!!datas.right.length">
        <div class="item-container" v-for="(item, index) in datas.right" :key="index"> 
          <!-- <div class="item-img">
            <img v-lazy="item.book_img">
          </div> -->
          {{ item }}
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      datas: 'book-list/getBookList',
      loading: 'book-list/getBookListLoading',
      hasMore: 'book-list/getBookListHasMore',
      page: 'book-list/getBookListPage',
      success: 'book-list/getBookListSuccess'
    }),
    busy () {
      if (this.loading || !this.hasMore || !this.success) {
        return true;
      }
      return false;
    }
  },
  methods: {
    goAddBook () {
      this.$router.push('/add-book')
    },
    async fetch () {
      this.$store.dispatch('book-list/getBook', this.page)
    }
  }
}
</script>
<style lang="scss" scoped>
  .book-list {
    display: block;
    width: 100%;
    &:after {
      content: '';
      display: block;
      clear: both;
    }
    .item {
      float: left;
      width: 50%;
      &-container {
        margin: 6px;
        border-radius: 4px;
        border: 1px solid #F1F1F1;
        background-color: #fff;
      }
      &-img {
        position: relative;
        width: 100%;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        max-height: 250px;
        img {
          width: 100%;
          display: block;
        }
      }
    }
  }
</style>

